Template Editor
The template editor allows you to edit the user-defined template.
The editor consists of the main panel that displays the actual editor and an additional panel with various sections on the right.
In this panel on the right, each section can be opened and closed separately, so that you only need to see the content of those sections that are currently of interest to you. Simply click on a section header to open/close this section.
The WYSIWYG (What-You-See-Is-What-You-Get) editor for a standard template has two modes:
In Design Mode you edit the HTML template in WYSIWYG fashion. In Code Mode you can edit the underlying HTML code directly. You can switch between the two modes at any time with the icons at the top left of the editor toolbar.
Use the other icons in the editor toolbar for access to various other editor function, for example to define formats and colors, to create links, add images, etc.
Note that the WYSIWYG HTML editor in LISTSERV Maestro supports only a subset of all possible HTML tags, which includes the most commonly used HTML features, especially for emails. See here for details about the HTML support in LISTSERV Maestro's editor.
For a template, the panel on the right contains the following sections:
Widget Hierarchy
This panel section shows you all the fluid design widgets that are currently contained in the HTML content, and also the hierarchy in which the widgets are nested into each other.
Each widget is represented with a main entry (shown with a bold text) that can be selected with a click. If you select a main entry in the widget hierarchy, then the corresponding widget will be highlighted with a widget border in the main WYSIWYG editor panel. Double click the main entry of a widget to open the widget's properties dialog or, for an already selected main entry, click the properties icon near the right edge of the entry to open the properties dialog.
You can delete a widget by selecting its main widget entry in the hierarchy panel section and pressing the DELETE or BACKSPACE key on the keyboard.
Nested below the widget's main entry, each widget also has one or two sub-entries that represent the editable content part (or parts) of the widget (shown with normal, non-bold text). These sub-entries cannot be selected directly in the widget hierarchy, but if you place the cursor inside of a widget content in the main WYSIWYG editor panel, then this content part is highlighted with a dotted border in the editor panel and the corresponding content entry in the widget hierarchy panel section is also highlighted, as a feedback about which widget content you are currently editing.
See below for more details about fluid design widgets and their properties.
Template Block Widget
This panel section allows you to insert an editable block widget into the template. To insert an editable block, simply place the cursor at the target location and click the widget in the panel section. Or simply drag & drop the widget from the panel section into the template.
When you create a template, then all HTML content that is outside of an editable block will be non-editable template content and only the content that is inside of an editable block will be editable by the user who later uses the template for the content of a mail job.
Note that an editable block cannot be nested into another editable block, but editable blocks can be nested into fluid design widgets.
See below for more details about the editable block widget and how to use editable blocks in your template.
Fluid Design Widgets
This panel section shows the available fluid design widgets that you can use in the HTML content.
Fluid design (often also called "responsive design") is a design principle under which the HTML content is created in such a fashion that it looks nice and readable on a variety of email clients, both with large and small screens, on computers or handheld devices.
To add a fluid design widget to your HTML content, simply place the cursor at the target location, then click on the desired widget in the fluid design widgets panel section. Or simply drag & drop a widget from the options panel section into the HTML content.
You have the choice between several different widget types. These widgets can also be nested into each other. See here for more details about the available widget types and how to use the fluid design widgets.
All widgets that you add to the HTML content will also be represented in the "widget hierarchy" panel section (see above for details).
Fluid Design Widget Default Font
This panel section allows you to select the default font that is to be used by the fluid design widgets. Simply click one of the available fonts to select it. This default is then automatically applied to all widgets. More precisely: The selected font is set as the default for all widgets but does not affect any text that is not contained in a fluid design widget.
In the widgets, where necessary you can of course always override this default with individual font settings, for example for certain paragraphs or words.
Merge Fields
This panel section shows all available merge fields. Click on a merge field name to insert it into the editor at the current cursor position.
Drop-Ins
This panel section is available if drop-in content is currently enabled. It lists all user-defined and system drop-ins. (Except for the social media sharing system drop-ins, see "Social Media" section below).
Click on a drop-in name to insert it into the editor at the current cursor position. Hover the mouse pointer over a drop-in name to see a short description of what this drop-in will do. See also here.
Editable Blocks
When you create a template, then all HTML content that is outside of an editable block will be non-editable template content. This means that the user who later uses the template for the content of a mail job (the "template end user") will not be able to edit or change this template content.
All template content that is inside of an editable block will be editable content. This means that the template end user can change and even remove or replace this content altogether.
Because this editable content can be changed or removed, you should be aware that all content in an editable block has only sample character. You should not put any important template elements that the user is not supposed to change into such an editable block. If you want, you can simply put something like "TODO" or "Content Here" into the editable block. Or you can supply more sophisticated sample content, to give the template end user an idea about what kind of content you, as the template creator, expect for a given editable block. Just remember that the sample content that you provide is only a suggestion that the template end user does not have to follow. He may well decide to supply different content instead.
While editing a template, such an editable block is represented by the template block widget, so wherever you put a template block widget into the template, there will be an editable block in the resulting template when it is used for a mail job.
An editable block widget has a properties dialog to define its settings. This properties dialog is automatically opened when you insert a new editable block widget and you can also open it again at a later time via the Widget Hierarchy panel section (just like the properties dialog for a fluid design widget).
In the properties dialog, you can define text and background colors for the editable block, as well as paddings and border styles. Note that these settings should be seen as part of the editable content and are therefore only suggestions. These colors, paddings and border styles can later be changed by the template end user, if he decides so.
You can also specify style sheet class names that shall be used by the editable block.
Also in the properties dialog, you can define if the editable block shall be cloneable and/or deletable:
-
Cloneable: A cloneable editable block can later be cloned by the template end user (i.e. this cloning happens when the template is used for the content of a mail job). Whenever an editable block is cloned, another editable block with exactly the same content and settings will be inserted immediately after the original editable block.
Any editable block that is created through cloning is itself always cloneable too, and is also deletable (see below), in case the template end user decides that he does not want the cloned block after all.
Example: A template for a newsletter with multiple articles. All articles follow a similar structure that is however not 100% fixed (i.e. it shall still be modifiable by the template end user). Also, at the time of the template creation it is not known how many articles each individual issue of the newsletter will have. Different issues may have a different number of articles.
For this, the template would have a single editable block where the sample content in that editable block defines the standard article structure (with headline, sub-header, article body, etc.). Since this is inside of the editable block, it can be changed by the template end user, who can thus fill in the correct texts for the headline, body, etc., but who can also modify the article structure, if necessary. This single editable block would thus define the sample structure for a single article.
Of course the template end user could then simply copy&paste this article structure inside of the editable block to duplicate it as often as he needs (for however many articles there are supposed to be). With this method, all articles would then live in the same editable block, which is of course entirely possible. But this copy&paste method is a bit cumbersome and also slightly error prone (if you don't select exactly the right parts of the article structure to copy).
Instead, the editable block can simply be defined as "cloneable". So whenever the template end user needs to add another article, he would simply clone one of the already existing editable blocks. With this method, at the end there would then be multiple editable blocks, each of which neatly contains only a single article. -
Deletable: A deletable editable block can later be deleted by the template end user (i.e. this deletion happens when the template is used for the content of a mail job). Whenever an editable block is deleted, it is removed from the copy of the template that is used in the mail job, together with all content in it. It is however not deleted from the original template. A deleted editable block cannot be restored, except by re-selecting the same original template from the template gallery.
Example: A template with three editable blocks: One for the header, one for the main content and another for the footer. The header and footer shall be optional, so those two editable blocks are defined as "deletable", so that the template end user can remove them if he doesn't want a header and/or footer in the mail job for which he uses the template. The main content shall not be optional, so that editable block would not be deletable.
In code mode, the editable block widget is represented by the <template-editableBlock> custom tag.
See here for details.